<template>
  <el-scrollbar style="height:100%">
    <div class="detail-panel-container">
      <div class="detail-panel-item">
        <el-descriptions :column="4">
          <template slot="title">
            <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
            <span>
              基本信息
              <el-button type="text" @click="editEmployeeBase" v-hasPermi="['employee:employee:edit']">修改</el-button>
            </span>
          </template>
          <el-descriptions-item  label="性别">{{employeeArchives.base.employeeGender}}</el-descriptions-item>
          <el-descriptions-item  label="身高">{{employeeArchives.base.employeeHeight}}</el-descriptions-item>
          <el-descriptions-item  label="体重">{{employeeArchives.base.employeeWeight}}</el-descriptions-item>
          <el-descriptions-item  label="婚育情况">{{employeeArchives.base.employeeMaritalStatus}}</el-descriptions-item>
          <el-descriptions-item  label="出生日期">{{employeeArchives.base.employeeBirthday}}</el-descriptions-item>
          <el-descriptions-item  label="年龄">{{employeeArchives.base.age}}</el-descriptions-item>
          <el-descriptions-item  label="民族">{{employeeArchives.base.employeeNation}}</el-descriptions-item>
          <el-descriptions-item  label="预计退休时间">{{employeeArchives.base.employeePlanRetireTime}}</el-descriptions-item>
          <el-descriptions-item  label="工龄">{{employeeArchives.base.workYears}}</el-descriptions-item>
          <el-descriptions-item  label="校龄">{{employeeArchives.base.schoolYears}}</el-descriptions-item>
          <el-descriptions-item  label="政治面貌">{{employeeArchives.base.employeeParty}}</el-descriptions-item>
          <el-descriptions-item  label="户籍类型">{{employeeArchives.base.employeeRegisteredType}}</el-descriptions-item>
          <el-descriptions-item  label="户籍所在地">{{employeeArchives.base.employeeRegisteredResidence}}</el-descriptions-item>
          <el-descriptions-item  label="籍贯">{{employeeArchives.base.employeeNative}}</el-descriptions-item>
          <el-descriptions-item  label="个人邮箱">{{employeeArchives.base.employeeEmail}}</el-descriptions-item>
          <el-descriptions-item  label="联系电话">{{employeeArchives.base.employeeTel}}</el-descriptions-item>
          <el-descriptions-item  label="紧急联系人1">{{employeeArchives.base.employeeEmergencyOnePerson}}</el-descriptions-item>
          <el-descriptions-item  label="紧急联系人1电话号码">{{employeeArchives.base.employeeEmergencyOneTel}}</el-descriptions-item>
          <el-descriptions-item  label="紧急联系人2">{{employeeArchives.base.employeeEmergencyTwoPerson}}</el-descriptions-item>
          <el-descriptions-item  label="紧急联系人2电话号码">{{employeeArchives.base.employeeEmergencyTwoTel}}</el-descriptions-item>
          <el-descriptions-item  label="开户银行">{{employeeArchives.base.employeeBankName}}</el-descriptions-item>
          <el-descriptions-item  label="银行卡号">{{employeeArchives.base.employeeBankCard}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          相关证件
          <el-button type="text" @click="addRelatedCertificate" v-hasPermi="['employee:certificate:add']">新增</el-button>
        </span>
        <div class="employee-certificate-container" v-if="employeeArchives.certificates&&employeeArchives.certificates.length>0">
          <div class="block" v-for="(cer,index) in employeeArchives.certificates"  :key="cer.certificate.employeeCertificateId" >
            <span class="employee-certificate-title">
              {{cer.certificate.employeeCertificateName+":"+cer.certificate.employeeCertificateCode}}
              <el-button type="text" @click="editRelatedCertificate(cer.certificate.employeeCertificateId)" class="experience-timestamp"
              v-hasPermi="['employee:experience:edit']">修改</el-button>
              <el-button type="text" @click="delRelatedCertificate(cer.certificate.employeeCertificateId)" class="experience-timestamp"
              v-hasPermi="['employee:experience:edit']">删除</el-button>
            </span>
            <div class="employee-certificate-files">
              <el-image class="employee-certificate-files-item" v-for="(file,index) in cer.files" :key="file.fileId" :src="echoPrefix+file.filePath">
                <div slot="placeholder" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </div>
        </div>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          工作经历
          <el-button type="text" @click="addExperience(experienceType.WORK)" v-hasPermi="['employee:experience:add']">新增</el-button>
        </span>
        <el-timeline  class="experience-timeline" v-if="employeeArchives.workExperiences&&employeeArchives.workExperiences.length>0">
          <el-timeline-item
            v-for="(item, index) in employeeArchives.workExperiences"
            :key="index"
            :hide-timestamp="true"
            placement="top"
          >
            <div class="el-timeline-item__timestamp is-top">
              <span>
                {{item.employeeExperienceStartTime+'~'+item.employeeExperienceEndTime}}
                <el-button type="text" @click="editExperience(item.employeeExperienceId,experienceType.WORK)" class="experience-timestamp"
                  v-hasPermi="['employee:experience:edit']"
                >
                  修改
                </el-button>
                <el-button type="text" @click="downloadAllFiles(item.employeeExperienceId,experienceType.WORK)"
                  class="experience-timestamp"
                  v-hasPermi="['employee:experience:edit']"
                >
                  下载附件
                </el-button>
              </span>
            </div>
            {{'描述：'+item.employeeExperienceContent}}
          </el-timeline-item>
        </el-timeline>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          海外经历
          <el-button type="text" @click="addExperience(experienceType.FOREIGN)" v-hasPermi="['employee:experience:add']">新增</el-button>
        </span>
        <el-timeline class="experience-timeline" v-if="employeeArchives.foreignExperiences&&employeeArchives.foreignExperiences.length>0">
          <el-timeline-item
            v-for="(item, index) in employeeArchives.foreignExperiences"
            :key="index"
            :hide-timestamp="true"
            placement="top"
          >
            <div class="el-timeline-item__timestamp is-top">
              <span>
                {{item.employeeExperienceStartTime+'~'+item.employeeExperienceEndTime}}
                <el-button type="text" @click="editExperience(item.employeeExperienceId,experienceType.FOREIGN)" class="experience-timestamp"
                v-hasPermi="['employee:experience:edit']">修改</el-button>
                <el-button type="text" @click="downloadAllFiles(item.employeeExperienceId,experienceType.FOREIGN)"
                  class="experience-timestamp"
                  v-hasPermi="['employee:experience:edit']"
                >
                  下载附件
                </el-button>
              </span>
            </div>
            {{'描述：'+item.employeeExperienceContent}}
          </el-timeline-item>
        </el-timeline>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          学习经历
          <el-button type="text" @click="addExperience(experienceType.EDUCATE)" v-hasPermi="['employee:experience:add']">新增</el-button>
        </span>
        <el-timeline v-if="employeeArchives.educateExperiences&&employeeArchives.educateExperiences.length>0" class="experience-timeline">
          <el-timeline-item
            v-for="(item, index) in employeeArchives.educateExperiences"
            :key="index"
            :hide-timestamp="true"
            placement="top"
          >
            <div class="el-timeline-item__timestamp is-top">
              <span>
                {{item.employeeExperienceStartTime+'~'+item.employeeExperienceEndTime}}
                <el-button type="text" @click="editExperience(item.employeeExperienceId,experienceType.EDUCATE)" class="experience-timestamp"
                v-hasPermi="['employee:experience:edit']">修改</el-button>
                <el-button type="text" @click="downloadAllFiles(item.employeeExperienceId,experienceType.EDUCATE)"
                  class="experience-timestamp"
                  v-hasPermi="['employee:experience:edit']"
                >
                  下载附件
                </el-button>
              </span>
            </div>
            {{'描述：'+item.employeeExperienceContent}}
          </el-timeline-item>
        </el-timeline>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
      <div class="detail-panel-item">
        <el-divider direction="vertical" class="detail-panel-item-title-line"></el-divider>
        <span class="detail-panel-item-title">
          其它附件
          <el-button type="text" @click="addOther" v-hasPermi="['employee:otherFile:add']">上传附件</el-button>
        </span>
        <ul v-if="employeeArchives.otherFiles&&employeeArchives.otherFiles.length>0" class="el-upload-list el-upload-list--text">
          <li tabindex="0" class="el-upload-list__item is-success other-file-item" v-for="(item,index) in employeeArchives.otherFiles" :key="index">
            <a class="el-upload-list__item-name">
              <i class="el-icon-document"></i>{{item.fileOriginalName}}
            </a>
            <label class="el-upload-list__item-status-label">
              <el-button type="text" @click="deleteFile(item)">删除</el-button>
              <el-button type="text" @click="downloadFile(item)">下载</el-button>
            </label>
          </li>
        </ul>
        <div v-else class="detail-empty-data">暂无数据</div>
      </div>
      <experienceedit v-if="editExperienceData.open" :prop="editExperienceData" @close="closeExperience"></experienceedit>
      <relatededit v-if="editRelatedCertificateData.open" :prop="editRelatedCertificateData" @close="closeRelatedCertificate"></relatededit>
      <otheredit v-if="editOtherData.open" :prop="editOtherData" @close="closeOther"></otheredit>
      <el-dialog :visible="editEmployeeBaseData.open" :fullscreen="true" :show-close="false">
        <employeebaseedit v-if="editEmployeeBaseData.open" :prop="editEmployeeBaseData" @close="closeEmployeeBase"></employeebaseedit>
      </el-dialog>
      <downloadfile v-if="downloadData.open" :prop="downloadData"></downloadfile>
    </div>
  </el-scrollbar>
</template>

<script>
import experienceedit from '@/views/employee/employee/components/archives/experienceEdit.vue'
import relatededit from '@/views/employee/employee/components/archives/relatedEdit.vue'
import otheredit from '@/views/employee/employee/components/archives/otherEdit.vue'
import employeebaseedit from '@/views/employee/employee/edit.vue'
import {echoPrefix,download,deleteFile} from '@/api/file/file.js';
import downloadfile from '@/views/components/DownloadAllFile/downloadFile.vue'
import {del as delEmployeeCertificate} from '@/api/employee/employeeCertificate/employeeCertificate.js'
export default {
  name: "Archives",
  dicts: [],
  components: { employeebaseedit,experienceedit,relatededit,otheredit,downloadfile},
  props:{
    prop:{
      type:Object,
      default:function(){
        return {
          base:{},
          certificates:[],
          workExperiences:[],
          foreignExperiences:[],
          educateExperiences:[],
        }
      }
    }
  },
  watch:{
    prop:function(newVal,oldVal){
      this.employeeArchives = newVal
    }
  },
  data() {
    return {
      echoPrefix:echoPrefix,
      employeeArchives:this.prop,
      editRelatedCertificateData:{
        open:false,
        title:'新增相关证件',
        employeeId:null,
        id:null,
      },
      experienceType:{
        WORK:"0",//工作经历,
        EDUCATE:"1",//教育学习经历,
        FOREIGN:"2", // 海外经历
      },
      editEmployeeBaseData:{
        open:false,
        title:'修改基本信息',
        employeeId:null,
      },
      editExperienceData:{
        open:false,
        title:'新增工作经历',
        typeId:null,
        employeeId:null,
        id:null,
      },
      editOtherData:{
        open:false,
        title:'新增其它附件',
        employeeId:null,
        fileId:null,
      },
      downloadData:{
        open:false,
        title:'下载附件',
        id:null,
        typeId:null
      },
    };
  },
  methods: {
    editEmployeeBase(){
      let data = {open:true,title:'修改员工基本信息',employeeId:this.employeeArchives.base.employeeId}
      this.editEmployeeBaseData = {...data}
    },
    closeEmployeeBase(){
      this.$emit('change')//触发更新方法更新数据
      let data = {open:false,title:'修改员工基本信息',employeeId:null}
      this.editEmployeeBaseData = {...data}
    },
    //新增相关证件
    addRelatedCertificate(){
      let data = {open:true,title:'新增证件', employeeId:this.employeeArchives.base.employeeId,employeeCertificateId:null}
      this.editRelatedCertificateData = {...data}
    },
    //修改相关证件
    editRelatedCertificate(certificateId){
      let data = {open:true,title:'修改证件',employeeId:this.employeeArchives.base.employeeId,employeeCertificateId:certificateId}
      this.editRelatedCertificateData = {...data}
    },
    //修改相关证件
    delRelatedCertificate(certificateId){
      this.$confirm('是否删除该证件？','确认信息',{
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(()=>{
        delEmployeeCertificate(certificateId).then(res =>{
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.$emit('change')
        }).catch(err =>{
          console.log('删除相关证件失败，原因：',err)
        })
      }).catch(action => {

      });
    },
    //关闭相关证件面板
    closeRelatedCertificate(isEdit){
      let data = {open:false,title:'新增工作经历',employeeId:this.employeeArchives.base.employeeId,employeeCertificateId:null}
      this.editRelatedCertificateData = {...data}
      if(isEdit){
        this.$emit('change')//触发更新方法更新数据
      }
    },
    //打开经历面板
    addExperience(typeId){
      let data = {open:true,title:'新增工作经历',typeId:typeId,employeeId:this.employeeArchives.base.employeeId,employeeExperienceId:null}
      if(typeId === this.experienceType.WORK){
        data.title = '新增工作经历'
      }else if(typeId === this.experienceType.FOREIGN){
        data.title = '新增海外经历'
      }else{
        data.title = '新增学习经历'
      }
      this.editExperienceData = {...data}
    },
    //关闭经历面板
    closeExperience(isEdit){
      let data = {open:false,title:'新增工作经历',typeId:null,employeeId:this.employeeArchives.base.employeeId,employeeExperienceId:null}
      this.editExperienceData = {...data}
      if(isEdit){
        this.$emit('change')//触发更新方法更新数据
      }
    },
    editExperience(experienceId,typeId){
      let data = {open:true,title:'修改工作经历',typeId:typeId,employeeId:this.employeeArchives.base.employeeId,employeeExperienceId:experienceId}
      if(typeId === this.experienceType.WORK){
        data.title = '修改工作经历'
      }else if(typeId === this.experienceType.FOREIGN){
        data.title = '修改海外经历'
      }else{
        data.title = '修改学习经历'
      }
      this.editExperienceData = {...data}
    },
    //打开其它附件面板
    addOther(typeId){
      let data = {open:true,title:'新增其它附件',employeeId:this.employeeArchives.base.employeeId,fileId:null}
      this.editOtherData = {...data}
    },
    //关闭其它附件面板
    closeOther(isEdit){
      let data = {open:false,title:'新增其它附件',employeeId:this.employeeArchives.base.employeeId,fileId:null}
      this.editOtherData = {...data}
      if(isEdit){
        this.$emit('change')//触发更新方法更新数据
      }
    },
    downloadFile(row){
      let params = {fileId:row.fileId}
      download(params)
    },
    downloadAllFiles(id,typeId){
      this.downloadData = {
        open:true,
        title:'下载附件',
        id:id,
        typeId:typeId
      }
    },
    deleteFile(row){
      if(row!==null&&row.fileId!==null){
        this.$confirm('是否删除该附件？','确认信息',{
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(()=>{
          deleteFile({fileId:row.fileId}).then(res =>{
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.$emit('change')//触发更新方法更新数据
          })
        }).catch(action => {

        });
      }
    }
  },
  mounted() {
  }

};
</script>
<style scoped>
  .detail-panel-container{
    height: 58vh;
  }
  .employee-file-container{
    display: flex;
    flex-direction: row;
  }
  .employee-file-container .block{
    margin:15px 0;
  }
  >>>.employee-file-container .block .el-image{
    width:70px;
    height:88px;
  }
  .employee-file-container .employee-file{
    width:32vw;
  }
  .detail-panel-item{
    margin: 5px 20px;
  }
  .detail-panel-item-title-line{
    background-color: #000000;
    margin-left: 0;
    margin-right: 0;
  }
  .detail-panel-item-title{
    font-weight:bold;
  }
  .employee-certificate-container{

  }
  .employee-certificate-container .block{
    margin:15px 15px;
  }
  .employee-certificate-container .employee-certificate-title{
    width:20vw;
    text-align: left;
    display: inline-block;
  }
  .employee-certificate-container .employee-certificate-files{
    width: 20vw;
    height: 88px;
    display: flex;
  }
  >>> .employee-certificate-files .el-image{
    width: 10vw;
    height: 88px;
    margin:5px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .experience-timeline{
    padding-top: 10px;
    padding-inline-start: 10px;
  }
  .other-file-item{
    width: 20vw;
    margin-left: 10px;
    height: 35px;
  }
  .detail-empty-data{
    width: 10vw;
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 100;
  }
  >>> .el-upload-list__item.is-success:hover .el-upload-list__item-status-label, .el-upload-list__item.is-success:focus .el-upload-list__item-status-label{
    display: block;
  }
  >>>.el-timeline-item__timestamp.is-top{
    padding-top: 2px;
  }
  >>>.experience-timestamp{
    padding: 0 0;
  }
  >>> .detail-panel-item .el-descriptions__body{
    margin-left:15px;
  }
</style>
